import React, {Component} from 'react';
import {
  View,
  Image,
  TouchableOpacity,
  Text,
  ScrollView,
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';

import EventManager from '../../events/EventManager';
import CommonStyles from '../../common/CommonStyles';
import SizeUtils from '../../common/SizeUtils';
import Constants from '../../common/Constants';
import NewsConstants from '../../common/NewsConstants';
import BaseComponent from '../common/BaseComponent';
import Config from '../../config';
import Platform from 'Platform';
import TImage from '../../components/TImage';
import NoticeIcon from "../user/NoticeIcon";

import NewsTypeShowView from '../news/NewsTypeShowView';

export default class NewsView extends BaseComponent  {
  constructor(props) {
    super(props);
    this.state.isRefreshing = false;
    this.state.scrollEnabled = Platform.OS === 'ios';
    this.state.currentIndex = 0;

    this._scrollView = null;

    this._pageWidth = SizeUtils.getWindowSize().width;
    this._pageHeight = this.props.style[0].height - SizeUtils.translateDesignHeightToCode(80);

    this._homeEventDispatcher = EventManager.getEventDispather(Constants.MODULE_TYPE.HOME);

    this._clickTopBtnTimer = null;
  }

  render() {
    return(
      <View style={{paddingTop:Config.paddingTop, backgroundColor:"#00000000"}}>
        {this._renderNavigationBar()}
        {this._renderTopButton()}
        {this._renderScrollView()}
      </View>
    )
  }

  _renderScrollView() {
    return(
      <ScrollView style={{width:this._pageWidth,
          height:this._pageHeight}}
        ref={(ref) => this._scrollView = ref}
        horizontal={true}   // 水平方向
        showsHorizontalScrollIndicator={false}  // 水平指示器
        showsVerticalScrollIndicator={false}    // 垂直指示器
        pagingEnabled={true}    // 开启分页功能
        alwaysBounceHorizontal={false} //弹性拉动一截
        onScroll={this._onScroll.bind(this)}
        scrollEnabled={this.state.scrollEnabled}
      >
          {this._getPage(0)}
          {this._getPage(1)}
          {this._getPage(2)}
          {this._getPage(3)}
          {this._getPage(4)}
      </ScrollView>
    )
  }

  _onScroll(event) {
    // if(this._clickTopBtnTimer) {
    //   return;
    // }
    let x = event.nativeEvent.contentOffset.x;
    let index = Math.round(x / this._pageWidth);
    if(this.state.currentIndex != index) {
      this.setState({
        currentIndex:index,
      })
    }
  }

  _renderNavigationBarRightButtonContent() {
    return (
      <View style={{ flexDirection: "row", alignItems: "center" }}>
        <TouchableOpacity
          style={{ marginRight: 10 }}
          onPress={() => {
            this.gotoPage(Config.pages.plate_search,{type:'news'});
          }}
        >
          <TImage
            source={require("../../../resource/images/workhard/search2.png")}
            style={{ width: 40, height: 40 }}
          />
        </TouchableOpacity>
        <NoticeIcon type={'news'} isWhite={true} authorization={this.props.authorization} />
      </View>
    );
  }

  _onPressNavigationBarLeftBtn() {

  }

  _changeTab(index) {
    this.setState({
      currentIndex:index,
    });
  }

  _getPage(index) {
    let type = index ;
    if(type == 3) {
      type = 4;
    }
    else if(type == 4) {
      type = 3;
    }
    return(
      <NewsTypeShowView home={this} isCurrent={this.state.currentIndex == index}
          type={type} style={{width:this._pageWidth, height:this._pageHeight}} noEmpty = {true}
          pageData = {this.props.pageData} autoInitRequest={index == 0}/>
    )
  }

  setHorizontalDisable(){
      this.setState({
        scrollEnabled:false
      })
  }

   setHorizontalEnable(){
      this.setState({
        scrollEnabled:true
      })
  }

  _renderTopButton() {
    return(
      <View style={{width:SizeUtils.getWindowSize().width, height:SizeUtils.translateDesignHeightToCode(80),
          flexDirection:"row", justifyContent:"center", alignItems:"center", borderBottomWidth:SizeUtils.translateDesignNumToCode(3),
          borderColor:"#eeeeee", backgroundColor:"#ffffff"}}>
        {this._getButton(0)}
        {this._getButton(1)}
        {this._getButton(2)}
        {this._getButton(3)}
        {this._getButton(4)}
      </View>
    )
  }

  _getButton(index) {
    let type = index;
    if(type == 2) {
      type = 3;
    }
    else if(type == 3) {
      type = 2;
    }
    return(
      <TouchableOpacity onPress={()=>this._onPressBtn(index)} style={{width:SizeUtils.getWindowSize().width/5,
          height:SizeUtils.translateDesignHeightToCode(80), flexDirection:"column", justifyContent:"center", alignItems:"center",
          }}>
        <View style={{height:SizeUtils.translateDesignHeightToCode(76), justifyContent:"center", alignItems:"center",}}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:index == this.state.currentIndex ? "#db3132": "#666666"}}>
            {NewsConstants.TYPE_NAMES[type]}
          </Text>
        </View>
        <View style={{borderColor:"#db3132", borderBottomWidth:index == this.state.currentIndex ? SizeUtils.translateDesignNumToCode(10) : 0,
          width:SizeUtils.translateDesignWidthToCode(60), height:SizeUtils.translateDesignHeightToCode(5)}}>
        </View>
      </TouchableOpacity>
    )
  }

  _onPressBtn(index) {
    if(this._clickTopBtnTimer) {
      return;
    }
    this._clickTopBtnTimer = setTimeout(() => {
      this.setState({
        scrollEnabled:Platform.OS === 'ios',
      });
      this._clearClickTopBtnTimer();
    }, 500);
    this.setState({
      scrollEnabled:true,
    }, ()=>this._scrollView.scrollTo({x:index * this._pageWidth}));
  }

  _clearClickTopBtnTimer() {
    this._clickTopBtnTimer && clearTimeout(this._clickTopBtnTimer)
    this._clickTopBtnTimer = null;
  }

  _renderNavigationBarTitle() {
    return(
      <View style={{height:SizeUtils.translateDesignNumToCode(30)}}>
        <Text style={{textAlign:'center',
          fontSize:SizeUtils.translateFontSizeToCode(36),
          color:this._fontColor, fontFamily:'STHeitiSC-Medium',
        }}> {"新闻"} </Text>
      </View>
    )
  }

  _renderEmpty() {
    var y = (SizeUtils.getWindowSize().height)/2 - SizeUtils.translateDesignWidthToCode(220) - Config.paddingTop;
    return (
      <View style={{alignItems:"center"}}>
        <Image source={require("../../../resource/images/common/weifabu.png")} style={{
          width:SizeUtils.translateDesignWidthToCode(220), height:SizeUtils.translateDesignWidthToCode(220),
          marginTop:y,
        }} />
      </View>
    )
  }
};
